var real = 0;
var t;

function setReal(id) {
    real = id;
    if(id == 1){
        window.clearInterval(this.t);//去掉定时器
        show_cpuAndmem_chart(0);
    } else {
        show_real_cpuAndmem_chart(0);
    }
}

function getChart(hostId) {
    if(this.real == 1){
        window.clearInterval(this.t);//去掉定时器
        show_cpuAndmem_chart(hostId);
    } else {
        show_real_cpuAndmem_chart(hostId);
    }
}

function show_datas(attr){
    var button_id = $(attr).attr("id");
    // alert(button_id);
    var ip = $("#"+button_id).val();
    // alert(ip);
    var data = {
        'name': ip
    };
    // 初始化echarts实例
    var myChart5 = echarts.init(document.getElementById('chartmain5'));
    // 使用制定的配置项和数据显示图表
    myChart5.setOption({
        title: {
            text: '内存使用情况(MB)'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['205','206','207']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} MB'
            }
        },
        series: [
            {
                name:'205',
                type:'line',
                data:[],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'},
                    ]
                }
            },
            {
                name:'206',
                type:'line',
                data:[],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'},
                    ]
                }
            },
            {
                name:'207',
                type:'line',
                data:[],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'},
                    ]
                }
            }
        ]
    });

    // 显示加载动画
    myChart5.showLoading();

    var legendDatas=[];
    var xAxisDatas=[];
    var seriesDatas=[];
    $.ajax({
        type: 'POST',
        async: true,     // 异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: '/main/getMonitorDatas',
        data: data,
        dataType: 'json',
        success: function(result) {
            if (result[1]) {
                for(var i=0;i<result[1].length;i++){
                    legendDatas.push("'"+result[1][i]+"'");    //挨个取出类别并填入类别数组
                }
            }
            //legend=result[1];
            alert(legendDatas);
            xAxisDatas=result[2];
            seriesDatas=result[3];

            myChart5.hideLoading();// 隐藏加载动画
            myChart5.setOption({   // 加载数据图表
                legend: {
                    data: legendDatas
                },
                xAxis: {
                    data: xAxisDatas
                },
                series: [{
                    // 根据名字对应到相应的系列
                    data: seriesDatas
                },
                {
                    data: result[4]
                },
                {
                    data: result[5]
                }
                ]
            });
        },
        error : function(jqXHR, textStatus, errorThrown) {// 请求失败时执行该函数
            alert("主机CPU&MEM图表数据请求失败 - " + jqXHR.status + " - " + errorThrown +  "\n" + jqXHR.responseText);
            myChart5.hideLoading();
        }
    })
}

$(document).ready(function show_shareHD_chart(){
    window.clearInterval(this.t);//去掉定时器
    var myChart6 = echarts.init(document.getElementById('chartmain6'),'westeros');// 初始化echarts实例
    myChart6.setOption({
        title : {
            text: '磁盘使用情况(GB)'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data:['已使用','百分比']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : {
                type : 'value',
                boundaryGap : [0, 0.01]
        },
        yAxis : {
                type : 'category',
                data : []
        },
        series : [
            {
                name:'已使用',
                type:'bar',
                data:[]
            }, {
                name:'百分比',
                type:'bar',
                data:[]
            }
        ]
    });// 使用制定的配置项和数据显示图表

    myChart6.showLoading();// 显示加载动画

    $.ajax({
        type: 'POST',
        async: true,// 异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: '/main/show_shareHD_chart',
        // data: data,
        // dataType: 'json',
        success: function(data) {
            var FileSystem=data[0];
            var Used=data[1];
            var Percent=data[2];
            myChart6.hideLoading();
            myChart6.setOption({// 填入数据
                yAxis: {
                    data: FileSystem
                },
                series: [{// 根据名字对应到相应的系列
                    data: Used
                }, {
                    data: Percent
                }]
            });
        },
        error : function(jqXHR, textStatus, errorThrown) {// 请求失败时执行该函数
            alert("主机磁盘空间使用情况图表数据请求失败 - " + jqXHR.status + " - " + errorThrown +  "\n" + jqXHR.responseText);
            myChart6.hideLoading();
        }
    })
});

$(document).ready(function show_real_cpuAndmem_chart() {
    window.clearInterval(this.t);//去掉定时器
    var myChart4 = echarts.init(document.getElementById('chartmain4'), 'westeros');// 初始化echarts实例
    myChart4.setOption({
        title : {
            text: 'CPU&内存使用率(GB)',
        },
        tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '',
                type: 'gauge',
                center : ['25%', '50%'],
                detail: {formatter:'{value}%'},
                data: [{value: 50, name: 'CPU使用率'}]
            },
            {
                name: '',
                type: 'gauge',
                center : ['75%', '50%'],
                detail: {formatter:'{value}%'},
                data: [{value: 50, name: '内存使用率'}]
            }
        ]
    }, true);

    myChart4.showLoading();// 显示加载动画
    // 异步加载数据
    $.ajax({
        type: 'POST',
        async: true,// 异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: '/main/show_real_cpuAndmem_chart',
        data: {host:0,isReal:this.real},
        dataType: 'json',
        success: function(result) {
            //alert(result);
            myChart4.hideLoading();// 隐藏加载动画
            myChart4.setOption({   // 加载数据图表
                series: [{
                    data: [{value: result[0], name: 'CPU使用率'}]
                },{
                    data: [{value: result[1], name: '内存使用率'}]
                }]
            });
            //option.series[0].data[0].value = result[0];
            //option.series[0].data[1].value = result[1];
            //myChart4.setOption(option, true);
        },
        error : function(jqXHR, textStatus, errorThrown) {// 请求失败时执行该函数
            alert("主机CPU&MEM实时图表数据请求失败 - " + jqXHR.status + " - " + errorThrown +  "\n" + jqXHR.responseText);
            myChart4.hideLoading();
        }
    });

    t = window.setInterval(function () {
        // 异步加载数据
        $.ajax({
            type: 'POST',
            async: true,// 异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: '/main/show_real_cpuAndmem_chart',
            data: {host:0,isReal:this.real},
            dataType: 'json',
            success: function(result) {
                //alert(result);
                myChart4.hideLoading();// 隐藏加载动画
                myChart4.setOption({   // 加载数据图表
                    series: [{
                        data: [{value: result[0], name: 'CPU使用率'}]
                    },{
                        data: [{value: result[1], name: '内存使用率'}]
                    }]
                });
                //option.series[0].data[0].value = result[0];
                //option.series[0].data[1].value = result[1];
                //myChart4.setOption(option, true);
            },
            error : function(jqXHR, textStatus, errorThrown) {// 请求失败时执行该函数
                alert("主机CPU&MEM实时图表数据请求失败 - " + jqXHR.status + " - " + errorThrown +  "\n" + jqXHR.responseText);
                myChart4.hideLoading();
            }
        });
    },5000);
});

$(document).ready(function show_tablespace_chart(){
    window.clearInterval(this.t);//去掉定时器
    var myChart1 = echarts.init(document.getElementById('chartmain1'), 'macarons');//初始化echarts实例
    myChart1.setOption({
        title : {
            text: '表空间使用情况(GB)',
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            x : 'center',
            y : 'top',
            data:[]
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'',
                type:'pie',
                radius : [40, 180],
                center : ['25%', '50%'],
                //roseType : 'area',
                roseType : 'radius',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                lableLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:[]
            },{
                name:'',
                type:'pie',
                radius : [40, 180],
                center : ['70%', '50%'],
                //roseType : 'area',
                roseType : 'radius',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                lableLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:[]
            }
        ]
    });//使用制定的配置项和数据显示图表

    myChart1.showLoading(); // 显示加载动画

    $.ajax({
        type: 'POST',
        async: true,// 异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: '/main/show_tablespace_chart',
        //data: data,
        //dataType: 'json',
        success: function(data) {
            myChart1.hideLoading();
            // 填入数据
            myChart1.setOption({
                legend:{
                    data: data[2]
                },
                series:[{
                        name: 'zgdba',
                        data: data[0]
                    },{
                        name: 'zgdbb',
                        data: data[1]
                    }]
            });
        },
        error : function(jqXHR, textStatus, errorThrown) {// 请求失败时执行该函数
            alert("数据库表空间图表数据请求失败 - " + jqXHR.status + " - " + errorThrown +  "\n" + jqXHR.responseText);
            myChart1.hideLoading();
        }
    })
});

function show_cpuAndmem_chart(hostId) {
    var myChart4 = echarts.init(document.getElementById('chartmain4'),'westeros');// 初始化echarts实例

    // 使用制定的配置项和数据显示图表
    myChart4.setOption({
        title: {
            text: 'CPU&内存趋势使用率(%)'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false
            }
        },
        legend: {
            data:['CPU','MEM'],
            x: 'center'
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        axisPointer: {
            link: {xAxisIndex: 'all'}
        },
        dataZoom: [
            {
                show: true,
                realtime: true,
                start: 30,
                end: 70,
                xAxisIndex: [0, 1]
            },
            {
                type: 'inside',
                realtime: true,
                start: 30,
                end: 70,
                xAxisIndex: [0, 1]
            }
        ],
        grid: [{
            left: 50,
            right: 50,
            height: '30%'
        }, {
            left: 50,
            right: 50,
            top: '55%',
            height: '30%'
        }],
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                axisLine: {onZero: true},
                data:[]
            },
            {
                gridIndex: 1,
                type : 'category',
                boundaryGap : false,
                axisLine: {onZero: true},
                data: [],
                position: 'top'
            }
        ],
        yAxis : [
            {
                name : 'CPU(%)',
                type : 'value',
                max : 100
            },
            {
                gridIndex: 1,
                name : 'MEM(%)',
                type : 'value',
                max : 100,
                inverse: true
            }
        ],
        series : [
            {
                name:'CPU',
                type:'line',
                symbolSize: 8,
                hoverAnimation: false,
                data:[]
            },
            {
                name:'MEM',
                type:'line',
                xAxisIndex: 1,
                yAxisIndex: 1,
                symbolSize: 8,
                hoverAnimation: false,
                data: []
            }
        ]
    });

    // 显示加载动画
    myChart4.showLoading();
    var xAxisDatas=[];
    $.ajax({// 异步加载数据
        type: 'POST',
        async: true,// 异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: '/main/show_cpuAndmem_chart',
        data: {host:hostId},
        dataType: 'json',
        success: function(result) {
            xAxisDatas=result[0];
            myChart4.hideLoading();// 隐藏加载动画
            myChart4.setOption({   // 加载数据图表
                xAxis: [{
                    data: xAxisDatas
                },{
                    data: xAxisDatas
                }],
                series: [{
                    data: result[1]
                },{
                    data: result[2]
                }]
            });
            myChart4.setOption(option);
        },
        error : function(jqXHR, textStatus, errorThrown) {// 请求失败时执行该函数
            alert("主机CPU&MEM趋势图表数据请求失败!" + jqXHR.status + " - " + errorThrown +  "\n" + jqXHR.responseText);
            myChart4.hideLoading();
        }
    });

    t = window.setInterval(function () {
        $.ajax({// 异步加载数据
            type: 'POST',
            async: true,// 异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: '/main/show_cpuAndmem_chart',
            data: {host:hostId},
            dataType: 'json',
            success: function(result) {
                xAxisDatas=result[0];
                myChart4.hideLoading();// 隐藏加载动画
                myChart4.setOption({   // 加载数据图表
                    xAxis: [{
                        data: xAxisDatas
                    },{
                        data: xAxisDatas
                    }],
                    series: [{
                        data: result[1]
                    },{
                        data: result[2]
                    }]
                });
                myChart4.setOption(option, true);
            },
            error : function(jqXHR, textStatus, errorThrown) {// 请求失败时执行该函数
                alert("主机CPU&MEM趋势图表数据请求失败!" + jqXHR.status + " - " + errorThrown +  "\n" + jqXHR.responseText);
                myChart4.hideLoading();
            }
        });
    },300000);
}

function show_real_cpuAndmem_chart(hostId) {
    window.clearInterval(this.t);//去掉定时器
    var myChart4 = echarts.init(document.getElementById('chartmain4'), 'westeros');// 初始化echarts实例

    myChart4.setOption({
        title : {
            text: 'CPU&内存实时使用率(%)',
        },
        tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '',
                type: 'gauge',
                center : ['25%', '50%'],
                detail: {formatter:'{value}%'},
                data: [{value: 50, name: 'CPU使用率'}]
            },
            {
                name: '',
                type: 'gauge',
                center : ['75%', '50%'],
                detail: {formatter:'{value}%'},
                data: [{value: 50, name: '内存使用率'}]
            }
        ]
    }, true);

    myChart4.showLoading();// 显示加载动画

    $.ajax({// 异步加载数据
        type: 'POST',
        async: true,// 异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: '/main/show_real_cpuAndmem_chart',
        data: {host:hostId},
        dataType: 'json',
        success: function(result) {
            //alert(result);
            myChart4.hideLoading();// 隐藏加载动画
            myChart4.setOption({   // 加载数据图表
                series: [{
                    data: [{value: result[0], name: 'CPU使用率'}]
                },{
                    data: [{value: result[1], name: '内存使用率'}]
                }]
            });
            myChart4.setOption(option);
        },
        error : function(jqXHR, textStatus, errorThrown) {// 请求失败时执行该函数
            alert("主机CPU&MEM实时图表数据请求失败 - " + jqXHR.status + " - " + errorThrown +  "\n" + jqXHR.responseText);
            myChart4.hideLoading();
        }
    });

    t = window.setInterval(function () {
        $.ajax({// 异步加载数据
            type: 'POST',
            async: true,// 异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: '/main/show_real_cpuAndmem_chart',
            data: {host:hostId},
            dataType: 'json',
            success: function(result) {
                //alert(result);
                myChart4.hideLoading();// 隐藏加载动画
                myChart4.setOption({   // 加载数据图表
                    series: [{
                        data: [{value: result[0], name: 'CPU使用率'}]
                    },{
                        data: [{value: result[1], name: '内存使用率'}]
                    }]
                });
                myChart4.setOption(option);
            },
            error : function(jqXHR, textStatus, errorThrown) {// 请求失败时执行该函数
                alert("主机CPU&MEM实时图表数据请求失败 - " + jqXHR.status + " - " + errorThrown +  "\n" + jqXHR.responseText);
                myChart4.hideLoading();
            }
        });
    },5000);
}
